<template>
  <a-modal v-model:visible="visible"
           title="举报"
           cancel-text="取消"
           ok-text="提交"
           @ok="handleOk" >
    <a-checkbox-group v-model:value="value" :options="options"></a-checkbox-group>
    <a-checkbox v-model:checked="checked">其它</a-checkbox>
    <a-textarea v-model:value="text" show-count :maxlength="100" />
  </a-modal>
</template>
<script>
import {ref, reactive} from "vue";
import { get, post, tip } from "@/common";

export default {

  setup() {
    const visible = ref(false);

    const value = ref([])

    const checked = ref(false)

    const text = ref("");

    const options = reactive([])

    const report = ref({
      target : null,
      type : 1,
      reportReasonList : []
    });

    const showModal = (commentId) => {
      report.value.target = commentId;
      visible.value = true;
    };

    const handleOk = e => {
      for (const i in value.value) {
        report.value.reportReasonList.push({
          reasonId : value.value[i]
        })
      }
      if(checked.value) {
        report.value.reportReasonList.push({
          reasonId : 0,
          reasonWhy : text.value
        })
      }
      console.log(report.value.reportReasonList);
      post("report/commit", report.value).then((res) => {
        console.log("report commit successfully!")
        tip.success("举报成功！");
        tip.success("工作人员将在24小时内审核您的举报信息。");
      });
      report.value.reportReasonList = [];
      value.value = []
      checked.value = false;
      text.value = "";
      visible.value = false;
    };

    return {
      // Declared data and methods
      visible,
      checked,
      value,
      options,
      text,
      showModal,
      handleOk,
    };
  },
  methods: {
    getReasonList() {
      get("/report/getReasonList/1").then((res) => {
        for (const i in res.data) {
          const formReason = {
            label:res.data[i].reasonWhy,
            value:res.data[i].reasonId
          };
          this.options.push(formReason);
        }
      });
    }
  },
  mounted() {
    this.getReasonList();
  },
}
</script>
<style scoped>

</style>